import React from 'react';
import { View, Button } from '@tarojs/components';


import './dataLoading.scss';

/**
 * 数据加载中组件
 * @returns {JSX.Element} 渲染的数据加载中组件
 */
export const DataLoadingView: React.FC = () => {
    return (
        <View className="data-loading-container">
            <View className="loading-content">
                {/* 道路和小车显示在字体区域上方 */}
                <View className="loading-road">
                    <View className="loading-car">
                        <View className="loading-strike"></View>
                        <View className="loading-strike loading-strike2"></View>
                        <View className="loading-strike loading-strike3"></View>
                        <View className="loading-strike loading-strike4"></View>
                        <View className="loading-strike loading-strike5"></View>
                        <View className="loading-car-detail loading-spoiler"></View>
                        <View className="loading-car-detail loading-back"></View>
                        <View className="loading-car-detail loading-center"></View>
                        <View className="loading-car-detail loading-center1"></View>
                        <View className="loading-car-detail loading-front"></View>
                        <View className="loading-car-detail loading-wheel"></View>
                        <View className="loading-car-detail loading-wheel loading-wheel2"></View>
                    </View>
                    <View className="road-lines">
                        <View className="road-line"></View>
                        <View className="road-line"></View>
                        <View className="road-line"></View>
                        <View className="road-line"></View>
                        <View className="road-line"></View>
                        <View className="road-line"></View>
                        <View className="road-line"></View>
                        <View className="road-line"></View>
                    </View>
                </View>
                
                {/* 字体显示区域 */}
                <View className="title-container">
                    <View className="data-loading-title text-lg">数据加载中...</View>
                </View>
            </View>
        </View>
    );
};

export default DataLoadingView;
